<template>
    <view>
        <image class="barimg" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732181111856801.png"></image>
        <view class="merbox">
            <view class="grow_box">
                <view class="grow_til">商家名称</view>
                <input class="grow_input" type="text" placeholder="请输入商家名称" v-model="reqdata.ShopName" maxlength="25">
            </view>
            <!-- <view class="grow_box">
                <view class="grow_til">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
                <input class="grow_input" type="text" placeholder="请输入姓名" v-model="reqdata.name">
            </view> -->
            <view class="grow_box">
                <view class="grow_til">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</view>
                <input class="grow_input" type="text" placeholder="请输入联系电话" v-model="reqdata.ServerPhone" maxlength="11">
            </view>
            <view class="grow_box">
                <view class="grow_til">所在地区</view>
                <view class="adder_box">
                    <picker mode="region" :value="['广东省','广州','天河']" @change="chooseAddressInfo" style="width:100%;height:100%;display:flex;align-items:center;">
							<view class="addre_til">{{region?region:'请选择省市区'}}</view>
						</picker>
                    <image class="adder_arr" src=" https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321827590581444.png"></image>
                </view>
            </view>
            <view class="grow_box2" style="border-bottom: 1rpx solid #e4e4e4;">
                <view class="grow_til">详细地址</view>
                <textarea class="grow_text" type="text" placeholder="请输入详细地址" auto-height v-model="reqdata.Address" maxlength="200"></textarea>
            </view>
            <view class="grow_box2">
                <view class="grow_til">商户简介</view>
                <textarea class="grow_text" type="text" placeholder="请输入商户简介" auto-height v-model="reqdata.Description" maxlength="200"></textarea>
            </view>
        </view>
        <view style="height:200rpx;"></view>
        <view class="bottombox">
            <view class="bottombtn" @click="sub">申请入驻</view>
        </view>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    region:'',
    reqdata:{
        ShopName:'',
        Address:'',
        ServerPhone:'',
        Province:'',
        City:'',
        Description:'',
        ShopType:'',
    }
};
},
methods: {
    // 选择地区
    chooseAddressInfo(e) {
        console.log('picker发送选择改变，携带值为', e)
        this.region = e.detail.value;
        this.reqdata.Province = e.detail.value[0]
        this.reqdata.City = e.detail.value[1]
    },
    async sub(){
        if(this.reqdata.ShopName == ''){
            return this.$pv.msg('请填写商家名称')
        }
        // if(this.reqdata.name == ''){
        //     return this.$pv.msg('请填写姓名')
        // }
        if(this.reqdata.ServerPhone == ''){
            return this.$pv.msg('请填写联系电话')
        }
        if(this.reqdata.Province == ''){
            return this.$pv.msg('请选择所在地')
        }
        if(this.reqdata.Address == ''){
            return this.$pv.msg('请填写详细地址')
        }
        let res = await this.$api.post('Shops/AddShops',this.reqdata)
        if(res.code == 0){
            this.$pv.msg('入驻成功')
            setTimeout(()=>{
                uni.navigateBack();
            },500)
            
        }else{
            this.$pv.msg(res.message)
        }
    }
},
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.barimg{
    width: 100%;
    height: 300rpx;
}
.merbox{
    background-color: #fff;
    margin-top: 24rpx;
    .grow_box{
        width: calc(100% - 32rpx);
        height: 106rpx;
        margin-left: 32rpx;
        padding-right:32rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #e4e4e4;
        .grow_til{
            width: 150rpx;
            font-size: 32rpx;
            margin-right: 64rpx;
            text-align: justify;
        }   
        .grow_input{
            flex: 1;
            font-size: 32rpx;
            color: #333333;
        }
        .adder_box{
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .addre_til{
                font-size: 32rpx;
                color: #333333;
            }
            .adder_arr{
                width: 24rpx;
                height: 32rpx;
            }
        }
    }
    .grow_box2{
        width: calc(100% - 32rpx);
        height: 212rpx;
        margin-left: 32rpx;
        padding-right:32rpx;
        box-sizing: border-box;
        display: flex;
        // align-items: center;
        // border-bottom: 1rpx solid #e4e4e4;
        padding-top: 30rpx;
        box-sizing: border-box;
        .grow_til{
            width: 150rpx;
            font-size: 32rpx;
            margin-right: 64rpx;
            text-align: justify;
        }   
        .grow_text{
            flex: 1;
            font-size: 32rpx;
            color: #333333;
        }
    }
}
.bottombox{
    width: 100%;
    height: 196rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    .bottombtn{
        width: 670rpx;
        height: 88rpx;
        background: linear-gradient( 98deg, #FFAD26 0%, #FE4E01 100%);
        border-radius: 44rpx;
        font-size: 32rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>